import React, { useState } from 'react';
import { Routes, Route, Link, useLocation } from 'react-router-dom';
import {
    DesktopOutlined,
    PieChartOutlined,
} from '@ant-design/icons';
import { Layout, Menu, theme } from 'antd';

import Home from './home';
import About from './about';
import StudentManagment from './studentManagment'

const { Header, Content, Footer, Sider } = Layout;

const items = [
    { label: <Link to="/">首页</Link>, key: '/', icon: <PieChartOutlined /> },
    { label: <Link to="/about">关于</Link>, key: '/about', icon: <DesktopOutlined /> },
    { label: <Link to="/studentManagment">学生管理</Link>, key: '/studentManagment', icon: <DesktopOutlined /> }
];
const PrimaryLayout = () => {
    const [collapsed, setCollapsed] = useState(false);
    const location = useLocation();
    const {
        token: { colorBgContainer },
    } = theme.useToken();

    return (

        <Layout
            style={{
                minHeight: '100vh',
            }}
        >
            <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
                <div className="demo-logo-vertical" />
                <Menu theme="dark" selectedKeys={location.pathname} mode="inline" items={items} />
            </Sider>
            <Layout>
                <Header
                    style={{
                        padding: 0,
                        background: colorBgContainer,
                    }}
                />
                <Content
                    style={{
                        margin: '0 16px',
                    }}
                >
                    <Routes>
                        <Route path="/" element={<Home />} />
                        <Route path="/about" element={<About />} />
                        <Route path="/studentManagment" element={<StudentManagment />} />
                    </Routes>
                </Content>
                <Footer
                    style={{
                        textAlign: 'center',
                    }}
                >
                    Ant Design ©{new Date().getFullYear()} Created by Ant UED
                </Footer>
            </Layout>
        </Layout>
    );
};

export default PrimaryLayout;